import React from "react";
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
import { useAuth } from "@/hooks/useAuth";

// 前台页面
import Home from "@/pages/Home";
import News from "@/pages/News";
import NewsDetail from "@/pages/NewsDetail";
import Announcements from "@/pages/Announcements";
import AnnouncementDetail from "@/pages/AnnouncementDetail";
import Services from "@/pages/Services";
import ServiceDetail from "@/pages/ServiceDetail";

// 懒加载管理系统页面
const AdminLogin = React.lazy(() => import("@/pages/admin/Login"));
const AdminDashboard = React.lazy(() => import("@/pages/admin/Dashboard"));
const BannerManagement = React.lazy(() => import("@/pages/admin/BannerManagement"));
const NewsManagement = React.lazy(() => import("@/pages/admin/NewsManagement"));
const AnnouncementManagement = React.lazy(() => import("@/pages/admin/AnnouncementManagement"));
const DraftManagement = React.lazy(() => import("@/pages/admin/DraftManagement"));
const ServiceManagement = React.lazy(() => import("@/pages/admin/ServiceManagement"));
const MessageManagement = React.lazy(() => import("@/pages/admin/MessageManagement"));
const CompanyInfoManagement = React.lazy(() => import("@/pages/admin/CompanyInfoManagement"));
const ContactInfoManagement = React.lazy(() => import("@/pages/admin/ContactInfoManagement"));

// 路由保护组件
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated, isAdmin } = useAuth();
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/admin/login" state={{ from: location }} replace />;
  }

  if (!isAdmin()) {
    return <Navigate to="/" replace />;
  }

  return <>{children}</>;
};

export default function App() {
  return (
    <Routes>
      {/* 前台路由 */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<div className="min-h-screen py-10"><div className="container mx-auto px-4"><h1 className="text-3xl font-bold mb-6">关于我们</h1><p className="text-gray-600">页面建设中，敬请期待...</p></div></div>} />
      <Route path="/news" element={<News />} />
      <Route path="/news/:id" element={<NewsDetail />} />
      <Route path="/announcements" element={<Announcements />} />
      <Route path="/announcements/:id" element={<AnnouncementDetail />} />
      <Route path="/services" element={<Services />} />
      <Route path="/services/:id" element={<ServiceDetail />} />
      <Route path="/contact" element={<div className="min-h-screen py-10"><div className="container mx-auto px-4"><h1 className="text-3xl font-bold mb-6">联系我们</h1><p className="text-gray-600">页面建设中，敬请期待...</p></div></div>} />

      {/* 管理系统路由 */}
      <Route path="/admin/login" element={
        <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
          <AdminLogin />
        </React.Suspense>
      } />
      <Route path="/admin" element={<Navigate to="/admin/dashboard" replace />} />
      <Route path="/admin/dashboard" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <AdminDashboard />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/banners" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <BannerManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/news" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <NewsManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/announcements" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <AnnouncementManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/drafts" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <DraftManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/services" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <ServiceManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/messages" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <MessageManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/company" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <CompanyInfoManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/company-info" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <CompanyInfoManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />
      <Route path="/admin/contact-info" element={
        <ProtectedRoute>
          <React.Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div>加载中...</div></div>}>
            <ContactInfoManagement />
          </React.Suspense>
        </ProtectedRoute>
      } />

    </Routes>
  );
}
